<template>
	<div class="page courseInfo base-content">
		<ul class="base-item-tab">
			<li>
				<router-link to="/BaseSetting/teachTime">教学时间</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/courseInfo" class="active">课程信息</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/teacher">教师信息</router-link>

			</li>
			<li v-if="classType==2">
				<router-link to="/BaseSetting/classRoomInfo">教室信息</router-link>
			</li>
					
			<li v-if="tnId == 66">
				<router-link to="/BaseSetting/courseAndTeach">教师及课时分配</router-link>
			</li>

		</ul>
		<div class="row" v-loading="tableLoading">
			<div class="col-xs-12">

				<div class="title-2">
					<div class="gradeTit">
						<h2 v-text="gradeTit"></h2>
						<p>tips：若不区分选考和学考课时，只需填写学考课时即可</p>
					</div>
					<span class="txt-t"></span>
					<div class="btns">
						<template>
							<el-tooltip :manual="true" :value="teacherModifyBtn" class="item" effect="dark" v-bind:content="secontent" placement="right">
								<!-- <el-button class="btn btn-pink" @click="setClass">设置课时</el-button> -->
								<el-button class="btn btn-pink" @click="setEdit">设置课时</el-button>
							</el-tooltip>

						</template>

					</div>
				</div>
				<div>
					<!-- <el-table class="table1" ref="multipleTable" :data="courseList" v-loading.body="tableLoading" tooltip-effect="dark" highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
						<el-table-column type="selection" style="width: 5%" @click="alocked()">
						</el-table-column>
						<el-table-column label="课程名称">
							<template scope="scope">{{ scope.row.courseName }}</template>
						</el-table-column>
						<el-table-column prop="name" label="课时">
							<template scope="scope">{{ scope.row.time }}节/周</template>
						</el-table-column>
					</el-table> -->
					<!-- 行政班表格 -->
					<div class="myTable">
						<!-- <el-table class="table1 czTable" v-loading="tableLoading" :data="courseList" :span-method="SpanMethod">
							<el-table-column label="课程名称"><template scope="scope">
								{{scope.row.courseName}}
							</template></el-table-column>
							<el-table-column label="考试类型"><template scope="scope">
								考试类型
							</template></el-table-column>
							<el-table-column label="单堂数"><template scope="scope">
								<div class="edit">
									<p v-text="scope.row.single"></p>
									<el-input v-model="scope.row.single" type="number" max="20"></el-input>
								</div>
							</template></el-table-column>
							<el-table-column label="连堂数"><template scope="scope">
								<div class="edit">
									<p v-text="scope.row.continuous"></p>
									<el-input v-model="scope.row.continuous" type="number" max="20"></el-input>
								</div>
							</template></el-table-column>
							<el-table-column label="总课时"><template scope="scope">
								{{scope.row.time}}
							</template></el-table-column>
						</el-table> -->
						<!-- 行政班表格 -->
						<table v-if="tableData.grade == 0">
							<thead>
								<tr>
									<th>课程名称</th>
									<th>单堂数</th>
									<th>连堂数</th>
									<th>总课时</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in courseList">
									<td>
										<span>{{item.courseName}}</span>
									</td>
									<td>
										<span class="editSpan">{{item.singleCourseHour}}</span>
										<input class="edit el-input__inner" type="number" v-show="tableData.isEdit" v-model="item.singleCourseHour" @input="inputChange(index,item,item.singleCourseHour,'singleCourseHour')" @blur="inputBlur(item)">
									</td>
									<td>
										<span class="editSpan">{{item.doubleCourseHour}}</span>
										<input class="edit el-input__inner" type="number" v-show="tableData.isEdit" v-model="item.doubleCourseHour" @input="inputChange(index,item,item.doubleCourseHour,'doubleCourseHour')" @blur="inputBlur(item)">
									</td>
									<td>
										<span>{{item.hours}}节/周</span>
									</td>
								</tr>
							</tbody>
						</table>

						<!-- 教学班表格 -->
						<table class="teach" v-if="tableData.grade > 0">
							<thead>
								<tr>
									<th>课程名称</th>
									<th>考试类型</th>
									<th>单堂数</th>
									<th>连堂数</th>
									<th>总课时</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in courseList">
									<td :rowspan="item.courseId > 3 ? 2 : 1" v-if="item.courseType != 2">
										<div>
											<span>{{item.courseName}}</span>
										</div>
									</td>
									<td>
										<div>
											<span v-text="item.typeName"></span>
										</div>
									</td>
									<td>
										<div>
											<span class="editSpan">{{item.singleCourseHour}}</span>
										    <input class="edit el-input__inner" type="number" v-show="tableData.isEdit" v-model="item.singleCourseHour" @input="inputChange(index,item,item.singleCourseHour,'singleCourseHour')" @blur="inputBlur(item)">
										</div>
									</td>
									<td>
										<div>
											<span class="editSpan">{{item.doubleCourseHour}}</span>
										    <input class="edit el-input__inner" type="number" v-show="tableData.isEdit" v-model="item.doubleCourseHour" @input="inputChange(index,item,item.doubleCourseHour,'doubleCourseHour')" @blur="inputBlur(item)">
										</div>
									</td>
									<td>
										<div>
											<span>{{item.hours}}节/周</span>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<!--<p class="warn">若要设置某老师必须带某班时，则设置“所带班级”项</p>-->
<!-- 
					<el-dialog title="设置课时" :visible.sync="dialogFormVisible">
						<el-form :model="form">

							<el-row>
								<el-col :span="24"><span class="font1">课程名称：</span><input v-model="courseNa" readonly="readonly" class="readonly"></el-col>
							</el-row>
							<el-row class="rlRow">
								<el-col :span="24"><span class="font1"><span class="redx">*</span>每周课时：</span><input v-model="time"> 节/周</el-col>
							</el-row>
							<span class="wranke">“4+1”表示4节单堂1节连堂共六课时</span>
						</el-form>

						<el-tooltip :manual="true" :value="saveBtn" class="item" effect="dark" v-bind:content="warnText" placement="right" v-bind:type="subType">
							<el-button class="btn-save-base layerSave" @click="saveClassTime">保存</el-button>
						</el-tooltip>

					</el-dialog> -->

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'

	export default {
		props:['tnId'],
		data() {
			return {
				tableData:{
					isEdit:false,
					noon:0,
					timeAll:0,
					grade:-1,
				},
				saveParams:[],
				user: {},
				gradeTit:'',
				subType: '',
				schoolId:'',
				urla: '',
				tableLoading: true,
				key: false,
				saveKey: false,
				courseList: [],
				currentRow: null,
				courseNa: '',
				"courseId": "课程ID",
				"time": "",
				"time1": "",
				"courseId": "",
				multipleSelection: [],
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				teacherModifyBtn: false,
				saveBtn: false,
				taskId: '',
				classType: 0,
				par: 0,
				warnText: "每周课时输入应为单独自然数或X+X形式",
				secontent: "请选择一项"
			}
		},
		mounted() {
			// this.$http.get(utils.UrlConfig.getGradeYearInfo)
			// .then(res => {
			// 	console.log(res)
			// }).catch(error => {
			// 	this.$message.error(error);
			// })
			this.getTeachTime();
		},
		methods: {
			// 获取课程信息 & 基础信息
			getTeachTime() {
				this.urla = utils.UrlConfig.saveOrUpdateCourseTime;
				this.taskId = sessionStorage.getItem('taskId');
				this.classType = sessionStorage.getItem('classType');
				
				this.$http.get(utils.UrlConfig.getTokenValue)
				.then(res => {
					this.schoolId = res.data.bizData.tnId;
				})

				this.$http.get(utils.UrlConfig.queryTeachTime + '&taskId=' + this.taskId)
				.then(res => {
					var arr = res.data.bizData.teachTime.split('|');
					var length = res.data.bizData.teachDate.split('|').length
					this.tableData.noon = res.data.bizData.teachTime.split('|')[0];
					arr.forEach(function(item,index){
						this.tableData.timeAll += item * length;
					},this)
					this.getCourseList();
				}).catch(error => {
					this.$message.error(error);
				})
			},
			// 获取表格数据
			getCourseList() {
				//字符串转为数值
				if(typeof(this.classType) == 'string') {
					this.classType = Number(this.classType)
				}
				this.$http.get(utils.UrlConfig.queryCourseInfoByTaskId + '&taskId=' + this.taskId)
					.then(res => {
						this.tableLoading = false;
						if(res.statusText != "OK") {
							this.$message.error(res.msg);
							return;
						}
						res = res.data;
						this.courseList = res.dtos;
						this.tableData.grade = res.grade;
						switch(this.tableData.grade){
							case '1':this.gradeTit = '高一年级';break;
							case '2':this.gradeTit = '高二年级';break;
							case '3':this.gradeTit = '高三年级';break;
						}
						console.log(this.gradeTit)
						console.log(this.tableData.grade)
						var typeFlag = this.courseList[0].courseType == -1 ? true : false;
						// 拆分单堂连堂
						for(var i = 0 ; i < this.courseList.length ; i++){
							var li = this.courseList;
							if(res.grade > 1 && typeFlag){
								li[i].courseType = 0;
								li[i]['typeName'] = '必考';
								if(li[i].courseId > 3 && li[i].courseId <= 10){
									this.courseList[i].courseType = 1;
									this.courseList[i]['typeName'] = '选考';

									var spliceLi = JSON.parse(JSON.stringify(this.courseList[i]))
									spliceLi.courseType = 2;
									spliceLi['typeName'] = '学考';
									spliceLi.singleCourseHour = 0;
									spliceLi.doubleCourseHour = 0;
									spliceLi.hours = 0;
									this.courseList.splice(i+1,0,spliceLi)
									i++;
								}else{
									li[i]['typeName'] = '选考';
								}
							}else{
								switch(li[i].courseType){
									case 0:
										li[i]['typeName'] = '必考';
									break;
									case 1:
										li[i]['typeName'] = '选考';
									break;
									case 2:
										li[i]['typeName'] = '学考';
									break;
								}
							}
						}
						console.log(this.courseList)
					}).catch(error => {
						console.log(error)
					})
			},
			teacherModify() {
				alert(this.multipleSelection.length)
				this.teacherModifyBtn = true;
				setTimeout(() => {
					this.teacherModifyBtn = false;
				}, 2000)

			},
			// 编辑 / 保存
			setEdit(e) {
				e = window.event || event;
				var vm = this;
				if(!vm.tableData.isEdit){
					e.target.innerHTML = '保存';
					vm.tableData.isEdit = true;
				}else{
					this.tableLoading = true;
					var timeAll = 0;
					var list = vm.courseList;
					var stopSave = [];
					vm.saveParams = [];
					list.forEach(function(item,index){
						if(item.courseType ==2){
							if(item.hours == 0){
								stopSave.push(item.courseName);
							}
						}
						timeAll += item.hours-0;
						var params = {
							singleCourseHour:item.singleCourseHour - 0,
							doubleCourseHour:item.doubleCourseHour - 0,
							hours:item.hours,
							schoolId:vm.schoolId,
							courseId:item.courseId,
							courseType:item.courseType
						}
						vm.saveParams.push(params);
					},vm)
					console.log(timeAll);
					if(stopSave.length > 0){
						this.tableLoading = false;
						if( stopSave.length>3 ){
							stopSave.length = 4;
							var stop = stopSave + '等科目学考总课时不能为0';
						}else{
							var stop = stopSave + '科目学考总课时不能为0';
						}
						vm.$message.error(stop);
						return;
					}
					if(timeAll > vm.tableData.timeAll){
						this.tableLoading = false;
						vm.$message.error('设置课时' + timeAll + '节大于总课时' + vm.tableData.timeAll + '节，请返回修改');
						return;
					}
					e.target.innerHTML = '设置课时';
					console.log(vm.tableData)
					vm.tableData.isEdit = false;
					vm.saveTime(vm.saveParams);
				}
			},
			// 保存数据
			saveTime(saveParams) {
				console.log(saveParams);
				// return;
				this.$http({ 
					method:'post',
					url:utils.UrlConfig.saveOrUpdateCourseHour + "&taskId=" + this.taskId,
					data:{
						data:{
							list:saveParams,
						}
					}
				}).then(res => {
					this.tableLoading = false;
					res = res.data;
					if(res.rtnCode === "0000000") {
						this.getCourseList();
						this.dialogFormVisible = false;
						this.$message({
							message: '保存成功！',
							type: 'success'
						});

					} else {
						this.$message.error(res.msg);
					}

				}).catch(error => {
					console.log(error)
				})
			},
			// 失焦判断请求
			inputBlur(val) {
				val.singleCourseHour = val.singleCourseHour == '' || val.singleCourseHour-0 < 0 ? 0 : val.singleCourseHour;
				val.doubleCourseHour = val.doubleCourseHour == '' || val.singleCourseHour-0 < 0 ? 0 : val.doubleCourseHour;
			},
			// 更新视图
			inputChange(index,item,val,type) {
				// 保留数字
				if(val > 20){
					this.$message.error('课时设置超过限制');
					this.$set(this.courseList[index],type,val.slice(0,2));
				}
				if(val < 0){
					this.$message.error('课时不能为负数');
					val = 0;
					this.$set(this.courseList[index],type,val);
				}
				if(val == ''){
					val = 0;
					this.$set(this.courseList[index],type,val);
				}
				// item.time = (item.singleCourseHour) + (item.doubleCourseHour*2);
				item.hours = (item.singleCourseHour-0) + (item.doubleCourseHour*2);
				this.$set(this.courseList,index,item)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				if(this.multipleSelection.length == 1) {
					this.key = true;
					this.courseNa = this.multipleSelection[0].courseName;
					this.courseId = this.multipleSelection[0].courseId;

				} else {
					this.key = false;

				}
			},
			saveClassTime(event) {

				//var reg = /(^[1-9]([0-9]*$)|^[0-9]$)/; //符合第一位不为0的正整数
				//var reg = /(^([0-9]*$)|^[0-9]$)/; //符合第一位可以为0的正整数
				var reg = /(^[0-9][1-9]([0-9]*$)|^[1-9]$)/; //符合第一位可以为0，第二位不为0的正整数,符合不为0的一位数
				var reg1 = /^[0-9]+\+[0-9]{1,}$/gi; //符合+

				const twoNum = this.time.split('+');

				if(reg1.test(this.time) && reg.test(twoNum[0]) && reg.test(twoNum[1]) && (twoNum[1] != 0)) {
					this.par = 1;
				} else {
					this.par = 0;
				}
				if((reg.test(this.time) && this.time != '') || this.par || (this.time == 10)) {

					if(this.time < 11 || (parseInt(twoNum[0])<11 && parseInt(twoNum[1]) < 11)) {
						this.saveBtn = false;
						this.courseId = this.multipleSelection[0].courseId;
						const courseId = this.multipleSelection[0].courseId;
						this.time1 = this.time.replace('+', '*');
						this.$http.post(utils.UrlConfig.saveOrUpdateCourseTime + "&taskId=" + this.taskId + "&courseId=" + courseId + "&time=" + this.time1)
							.then(res => {

								res = res.data;
								if(res.rtnCode === "0000000") {
									this.getCourseList();
									this.dialogFormVisible = false;
									this.$message({
										message: '保存成功！',
										type: 'success'
									});

								} else {
									this.$message.error(res.msg);
								}

							}).catch(error => {
								console.log(error)
							})

					} else {
						this.warnText = "请输入正确的课时"
						this.saveBtn = true;
						setTimeout(() => {
							this.saveBtn = false;
						}, 2000);

					}
				} else {
					//this.warnText = "每周课时输入应为1-10的单独自然数或X+X形式"
					this.warnText = "请输入正确的课时"
					this.saveBtn = true;
					setTimeout(() => {
						this.saveBtn = false;
					}, 2000);

				}

			},
			// 打开弹窗
			setClass() {
				if(this.multipleSelection.length == 1) {
					this.teacherModifyBtn = false;
					this.courseNa = this.multipleSelection[0].courseName;
					this.courseId = this.multipleSelection[0].courseId;
					this.time = this.multipleSelection[0].time
					this.dialogFormVisible = true;
				} else if(this.multipleSelection.length == 0) {
					this.secontent = "请选择一项"
					this.teacherModifyBtn = true;
					setTimeout(() => {
						this.teacherModifyBtn = false;
					}, 2000)

				} else {
					this.secontent = "设置课时只能选择一项"
					this.teacherModifyBtn = true;
					setTimeout(() => {
						this.teacherModifyBtn = false;
					}, 2000)
				}
			},
		}
	}
</script>

<style scoped>
	.title-2{
		padding-top:0px;
	}

	.gradeTit h2{
		font-size:17px;
		font-weight: 500;
		line-height: 1;
		margin-bottom:10px;
	}

	.gradeTit p{
		font-size:14px;
		color:#36c6d3;
	}

	.btns{
		position: absolute;
		top:38px;
		right:12px;
	}

	table{
    	table-layout: fixed;
	}

	thead tr th {
		border-right: 1px solid #dfe6ec;
		text-align: center!important;
	}
	
	thead tr .el-table-column--selection .cell {
		display: none;
	}
	
	table tr td {
		text-align: center;
		position: relative;
	}

	td{
		height:auto !important;
	}

	td>div{
		height:36px !important;
	}
	
	input {
		width: 100px;
		border-radius: 2px;
		border: 1px solid #DBDBDB;
		text-align: center;
	}
	
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
	}
	
    input[type="number"]{
        -moz-appearance: textfield;
    }

	table .editSpan{
		display:inline-block;
		width: 50px;
		height: 26px;
		overflow: hidden;
		/* line-height:  */
	}

	.myTable{
		min-height: 400px;
	}

	.myTable .teach tbody tr:nth-child(2n) {
		/* background-color: #fff; */
	}
	
	.el-dialog__header {
		padding: 10px 12px 6px 12px;
		background-color: #f5f5f4;
		border: 1px solid lightgrey;
	}
	
	.el-dialog__title {
		color: #CB171D;
		font-size: 13px;
	}
	
	.el-dialog__close {
		font-size: 12px;
	}
	
	.el-row {
		margin-bottom: 16px;
	}
	
	.page .layerSave {
		margin: 30px auto 0 auto!important;
		background: #36c6d3;
		color: white;
	}
	
	.courseInfo .el-dialog--small {
		width: 27% !important;
	}
	
	.el-dialog--small .readonly {
		background: white!important;
		border: 0px;
	}
	
	.courseInfo .base-item-tab {
		padding-bottom: 7px;
	}
	
	.courseInfo .warn {
		color: #b0b0b0;
		margin-top: 5px;
	}
	
	.courseInfo {
		padding-left: 0px;
	}
	
	.courseInfo .btn-pink,
	.btn-pink:focus {
		width: 100px;
		height: 30px;
		line-height:30px;
		background-color: #36c6d3!important;
		border-color: #36c6d3;
		color: #fff!important;
		border: 0px!important;
		line-height: 7px!important;
	}
	
	.courseInfo .base-item-tab li+li+li a {
		border-right: 1px solid #D8D8D8!important;
	}
	
	.courseInfo .base-item-tab li:last-child a {
		border-right: 0 !important;
	}
	
	.wranke {
		margin-left: 71px;
		font-size: 12px;
	}
	
	.rlRow {
		margin-bottom: 2px!important;
	}
	
	.redx {
		color: #CB171D;
	}
</style>